<template>
	<my-nav-bar bgType="transparent" title="留个言吧"></my-nav-bar>
	
	 <!-- :class="[ isCommentSelected ? "selected" : '' ]" -->
	 
	<view class="sendCommentArea OrangeFrostedGlass"  :style="{ height: CommentAreaHeight + 'px' }">
		<view class="commentBox">
			<view class="upperBox" :class="[isInputBoxFocus ? 'focus' : '']">
				<textarea class="commentInput" v-model="CommentStr"
				 @input="handleInput" @focus="onInputFocus" @blur="onInputBlur"  maxlength="1024" placeholder="请输入评论"></textarea>
			</view>

			<view class="bottomBox">
				<view class="charCount">{{ charCount }}/1024</view>
				<button class="sendCommentButton" @click="onClickSendCommentButton" :disabled="charCount > 1024">发送</button>
			</view>
		</view>
	</view>
	
	<!-- <view class="CommentPage pageBg"></view> -->
	
	<!-- :scroll-top="scrollTop" scroll-y="true" @scrolltoupper="upper" @scrolltolower="lower"  -->
	<scroll-view class="CommentScroll" scroll-y="true" @scroll="onScroll" refresher-enabled="true" @refresherrefresh="onRefresh" :refresher-triggered="isRefreshing">
		<view class="placeholder" :style="{ height: CommentAreaHeight + 'px' }"></view>
		<comment-item class="CommentItem" v-for="(item,index) in CommentList" :CommentObj="item" :UserObj="UserMap[item.user_open_id]" >  </comment-item>
		<view class="toBottomHint"> 已经到底啦~ </view>
	</scroll-view>

		<!-- :style="{ transform: 'translateY(' + CommentAreaTranslateY + 'px)' }" -->
		
		<!-- 			:dy="CommentAreaTranslateY/2 * (CommentList.length-index) / (CommentList.length) * 1.2"
					:style="{ transform: 'translateY(' + CommentAreaTranslateY/2 * (CommentList.length-index) / (CommentList.length) + 'px)' }" -->		
	
	<my-nav class="down-nav" :y="Number(1)" :x="XRef"></my-nav>
	
</template>

<script setup>
	import { ref, nextTick, onMounted } from 'vue';
	import { SYSTEM_INFO, getStatusBarHeight, getTitleBarHeight, getNavBarHeight, getLeftIcon } from '@/utils/system.js';
	import { BASE_URL, request } from "@/utils/request.js";
	import { getCurrentIdx, toUrl } from "@/utils/page.js";
	import { formatDate } from "@/utils/string.js"
	import { onLoad, onReady, onShow, onHide, onUnload, onPageScroll } from "@dcloudio/uni-app";
	
	const app = getApp();
	const UserInfoFromServer = app.globalData.UserInfoFromServer;
	
	const PageHeight = ref( uni.getWindowInfo().screenHeight - getNavBarHeight() - 111 );
	const CommentAreaHeight = ref( getNavBarHeight() + 111 );
	// const CommentAreaTranslateY = ref(0);
	const isInputBoxFocus = ref(false);
	const CommentStr = ref('请输入评论');
	const charCount = ref(0);
	
	const hintLogin = ()=>{
		console.log("un logged in");
		uni.showModal({
			title: "请先登录",
			content: "评论功能需要先登录",
			showCancel: true,
			cancelText: "暂时不",
			confirmColor: '#3CC51F',
			success: function (res) {
			    if (res.confirm) {
			      console.log('用户点击了确定');
				  toUrl('/pages/my/my');
			    } else if (res.cancel) {
			      console.log('用户点击了取消');
			    }
			},
		})
	}
	
	const handleInput = (e) => {
		// console.log(e)
		if (getApp().globalData.isLoggedIn.value === false){
			hintLogin();
			return;
		}
		
		charCount.value = e.detail.value.length;
	};
	const onInputFocus = ()=>{ isInputBoxFocus.value = true; }
	const onInputBlur = ()=>{ isInputBoxFocus.value = false; }
	
	const onClickSendCommentButton = ()=>{
		if (getApp().globalData.isLoggedIn.value === false){
			hintLogin();
			return;
		}
		request({
			url: 'message/add',
			method: 'POST',
			data: { 
				user_open_id: UserInfoFromServer.value.open_id,
				message_content: String(CommentStr.value),
				message_time: formatDate(new Date())
			}
		})
		.then(()=>{
			getCommentListAndUserList();
			CommentStr.value = '请输入评论';
		})
		
		//接口格式
		// {
		//     "user_open_id": "openid1",
		//     "message_content":"qwq",
		//     "message_time":"5555-07-01T10:00:00"
		// }
	}
	
	const CommentList = ref([]);
	const UserList = ref([]);
	const UserMap = ref({});
	
	const isRefreshing = ref(false);
	const onRefresh = ()=>{
		console.log("on refresh()");
		uni.showToast({
			title: '评论刷新中...',
			duration: 2000
		});
		isRefreshing.value = true;
		getCommentListAndUserList()
			.finally(()=>{

				setTimeout(()=>{
					isRefreshing.value = false;
					uni.hideToast();
				},555);
				
			})
	}
	
	const onScroll = (e)=>{
		// console.log(e.detail);
		// CommentAreaTranslateY.value = - e.detail.scrollTop;
	}
	
	const getCommentListAndUserList = async ()=>{
		request( { url: 'message/all/not_deleted' } )
			.then( res=>{
				console.log("getCommentListAndUserList: all Comment res:"); console.log(res);
				CommentList.value = res.data;
				CommentList.value.reverse();
			} );
		request( { url: 'wx/user/all'} )
			.then( res2=>{
				console.log("getCommentListAndUserList: all User res2:"); console.log(res2);
				UserList.value = res2.data;
				UserList.value.forEach((user, index) => {
					UserList.value[index].AvatarUrl = BASE_URL + `wx/user/avatar_image/${user.open_id}`;
				})
				
				const userMap = {};
				UserList.value.forEach(user => {
					userMap[user.open_id] = user;
				});
				UserMap.value = userMap;
				console.log("ref var user map: "); console.log(UserMap.value);
				// console.log("test user map: "); console.log(UserMap.value['openid1']);
			} );
	}
	
	
	onLoad(()=>{
		getCommentListAndUserList();
	})
	//-----------------------	
	const XRef = ref( Number(1) );
	
	onLoad((event) => {
		XRef.value = event.LastIdx ? Number(event.LastIdx) : 1;
		
		console.log("-------global data-------");
		console.log(getApp().globalData);
	});
	
</script>

<style lang="scss" scoped>
	
	.sendCommentArea.selected{
		transform: scale(1.05);
		transition: 0.55s;
		.commentInput{
			background-color: white;
			height: 90px;
			padding: 10px;
		}
	}
	
	.sendCommentArea {
		// border: 1px solid red;
		width: 100%;
		position: fixed; top: 0; z-index: 114514;
		display: flex; flex-direction: row; align-items: center;
		
		.commentBox{
			border: 1px solid rgba(111,111,111,0.1);
			height: 111px;  width: 94%;
			position: absolute; bottom: 10px; left: 3%;
			border-radius: 10px; overflow: hidden;
			box-shadow: 2px 4px 6px 8px rgba(0, 0, 0, 0.10); /* 水平偏移量 垂直偏移量 模糊半径 阴影颜色 */
			background-color: rgba(0,0,0,0.2);
			
			
			.upperBox.focus{
				background-color: rgba(250,250,250,0.750);
				backdrop-filter: blur(2.5px);
				
				transition: 0.25s ease-in-out;
			}
			.upperBox{
				// border: 1px solid red;
				height: 90px;
				transition: 0.25s ease-in-out;
				.commentInput{
					height: 90px;
					padding: 10px;
				}
			}
			.bottomBox{
				// border: 1px solid red;
				border-top: 1px solid gray;
				display: flex; flex-direction: row;
				height: 21px; width: 100%;
				padding: 0 10px 0 10px;
				position: absolute; bottom: 0;
				.sendCommentButton{
					height: 100%; width: 100rpx;
					position: absolute; right: 0;
					font-size: 10px;
				}
			}
		}
	}
	
	.OrangeFrostedGlass{
		background: rgba(250, 150, 0, 0.5);
		backdrop-filter: blur(5px);
		box-shadow: 5px 5px 5px 2px rgba(0, 0, 0, 0.2); /* 水平偏移量 垂直偏移量 模糊半径 阴影颜色 */
	}
	
	.CommentScroll {
		height: 100%; width: 100%; z-index: 10; position: fixed;
		.placeholder{
			margin-bottom: 11px;
		}
		.CommentItem{
			left: 0; right: 0; margin: auto;
		}
		.toBottomHint{
			// border: 1px solid red;
			height: 100px;
			text-align: center;
			margin: 100px 0 100px 0;
		}
	}
	
	
	.CommentPage{
		// border: 2px solid red;
		width: 100%;
		height: 100%;
		top: 0;
		position: fixed;
		display: flex; flex-direction: column; align-items: center;
		padding-top: 10px;
	}
	
	
	.down-nav {
		// border: 10px solid red;
		z-index: 114514;
		position: fixed;
		bottom: 20rpx;
	}

</style>
